<template>
    <div class="CustomeInfoTwo">

    <!--顶部固定区域-->
     <div class="weui-cells TotalCustome">
         <div class="tab_scroll">
            <tab active-color="#1e96eb" :prevent-default="false">
                <tab-item selected @on-item-click="handler">全部</tab-item>
                <tab-item @on-item-click="handler">员工</tab-item>
                <tab-item @on-item-click="handler">访客</tab-item>
            </tab>
         </div>


        <div class="weui-cell" style="padding: 7px 15px">
                <div class="weui-cell__hd"><img src="../../static/img/main.png" alt="" style="width:45px;height45px;margin-right:5px;background-size: cover;object-fit: cover;display:block"></div>
                <div class="weui-cell__bd color_666">
                    <p>{{typeName}}</p>
                </div>
                <div class="weui-cell__ft" style="color: #1e96eb;">{{TotalCustome}}(人)</div>
         </div>

      </div>

     <!--mescroll滚动区域的基本结构-->
     <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
      <!--内容...-->
       <ul id="dataList" class="data-list">

           <div class="weui-cells custome_weui-cells">

            <div class="weui-cell" v-for="(item, index) in dataList" :key="index">
                <div class="weui-cell__hd">
                      <img :src="item.image"  style="width:45px;height:45px;background-size: cover;object-fit: cover;margin-right:15px;display:block;border-radius:50%;">
                </div>

                <div class="weui-cell__bd">
                    <p>{{item.name}}</p>
                </div>
                <div class="weui-cell__ft"></div>
            </div>
        </div>

       </ul>
     </mescroll-vue>

    </div>
</template>
<script>
import { Tab, TabItem,Toast} from "vux";
import MescrollVue from "mescroll.js/mescroll.vue";
import VueLazyload from 'vue-lazyload'
import { bridge } from "../../src/assets/common/js/dsbridge";
export default {
  name: "CustomeInfoTwo",
  data() {
    return {
      show:false,
      type:0, //0:全部 1：员工  2：访客
      typeName:'总人数',
      TotalCustome:'0',
      title: "人员信息",
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        page:{
           num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
           size: 8 //每页数据条数,默认10
        }
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: {
        // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); }
        //以下是一些常用的配置,当然不写也可以的.
        page: {
          num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 8 //每页数据条数,默认10
        },
        //支持自定义没有更多数据
        htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        noMoreSize: 8, //如果列表已无数据,可设置列表总数大于8才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        toTop: {
          //回到顶部按钮
          src: "./static/img/mescroll-totop.png", //图片路径,默认null,支持网络图
          offset: 12 //列表滚动1000px才显示回到顶部按钮
        },
        empty: {
          //列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
          warpId: "dataList", //父布局的id (1.3.5版本支持传入dom元素)
          icon: "./static/img/mescroll-empty.png", //图标,默认null,支持网络图
          tip: "暂无相关数据~" //提示
        }
      },
      dataList: [], // 列表数据,
      tabindex:0    //下标
    };
  },

  components: {
    Tab,
    TabItem,
    MescrollVue,
    VueLazyload,
    Toast
  },
   mounted() {
     $(".vux-tab-wrap").css('padding-top','55px');
     $(".vux-tab-item").css({"line-height":"55px","font-size":"16px"});
     $(".mescroll-empty").css('padding-top','100px');
     $(".vux-tab").css('height','55px');
     $(".vux-tab-container").css('height','55px');
     //获取总人数
     let Count = bridge.call("getCustomeCount",this.type) || null;
     if(Count!=null){
          this.TotalCustome=Count;
       }else{
          this.TotalCustome=0;
      }
  },

  methods: {
     // mescroll组件初始化的回调,可获取到mescroll对象 (如果this.mescroll并没有使用到,可不用写mescrollInit)
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
    upCallback(page, mescroll) {
      let self=this;
      request(self,page,mescroll);
    },

    //点击事件
    handler(index){
       console.log(index);
       switch(index){
          case 0:
           this.type=0;
           this.typeName="总人数"
          break

          case 1:
            this.type=1;
            this.typeName="员工总数"
          break

          case 2:
              this.type=2;
              this.typeName="访客总数"
          break
       }
       //查询总数
       let Count = bridge.call("getCustomeCount",this.type) || null;
       if(Count!=null){
          this.TotalCustome=Count;
       }else{
          this.TotalCustome=0;
       }
       //先置空
       this.dataList=[];
       this.mescroll.triggerDownScroll();
    }
  },

  created() {

  },

  activated() {}
};

 //请求数据
let request = (self,page,mescroll) => {
     console.log("111111111111");
    //从数据库获取请求数据
      let params = {
        page: page.num, // 页码
        rows: page.size, // 每页长度
        data: {
           type: self.type  // 0:表示全部  1:表示员工  2:表示访客
        }
      }

      console.log(params);
      self.$vux.loading.show({
          text: 'Loading',
          position: "center"
      })

        //查询总数
       let Count = bridge.call("getCustomeCount",self.type) || null;
       if(Count!=null){
          self.TotalCustome=Count;
       }else{
          self.TotalCustome=0;
       }

      let result = bridge.call("getAllCustomeList", JSON.stringify(params)) || null;
      setTimeout(() => {
        if (result != null) {
          // 请求的列表数据
          let arr = JSON.parse(result);
          console.log(arr);
          self.show = false;
          // 如果是第一页需手动制空列表
          if (page.num === 1) self.dataList = [];
          // 把请求到的数据添加到列表
          self.dataList = self.dataList.concat(arr);
          // 数据渲染成功后,隐藏下拉刷新的状态
          self.$nextTick(() => {
             self.$vux.loading.hide()
             mescroll.endSuccess(arr.length);
          });
        } else {
          self.show = false;
          self.$vux.loading.hide()
          self.$nextTick(() => {
            mescroll.endSuccess(0);
          });

        }
      }, 500);
}

</script>


<style scope>
.CustomeInfoTwo {
  height: 100%;
}

.CustomeInfoTwo .TotalCustome{
    top: 0;
    margin-top: 0;
    position: fixed;
    width: 100%;
    height: auto;
}

/*以fixed的方式固定mescroll的高度*/
.CustomeInfoTwo .mescroll {
  position: fixed;
  z-index: 100;
  top:100px;
  bottom: 0;
  height: auto;

}

.CustomeInfoTwo .custome_weui-cells{
  line-height: 2.2;
}

.mescroll-empty {
    width: 100%;
    padding-top: 80px;
    text-align: center;
}

.CustomeInfoTwo .tab_scroll{
    overflow: scroll;
}

.CustomeInfoTwo .box::-webkit-scrollbar {
  display: none;
 }

</style>
